import Vue from 'vue'
import VueRouter from 'vue-router'
import routes from './router.config';

Vue.use(VueRouter);  //router-view  router-link

//注册组件：1.全局注册   2.局部注册

// Vue.component(组件名字,组件对象)

// const routes = [
//   {
//     path: '/',
//     name: 'Home',
//     component: Home
//   },
//   {
//     path: '/about',
//     name: 'About',
//     // route level code-splitting
//     // this generates a separate chunk (about.[hash].js) for this route
//     // which is lazy-loaded when the route is visited.  //路由懒加载，用来提高首屏加载的速度
//     component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
//   }
// ]

const router = new VueRouter({
    mode: 'hash', //history  hash  abstract
    base: process.env.BASE_URL,
    routes:[
        ...routes,
        {
            path:'/404',
            component:() => import(/* webpackChunkName: "about" */ '../views/error/404.vue')
        },
        {
            path:'*',
            redirect:'/404'
        }
    ],
    linkActiveClass:'active'
})

//路由守卫：

/***
 * 1.全局路由守卫  
 * 
 * router.beforeEach((to,from,next) => {})
 * 
 * router.afterEach((to,from) => {})
 * 
 * 
 * 2.路由独享
 * 
 * beforeEnter((to,from,next) => {})
 * 
 * 
 * 3.组件内守卫
 * 
 * beforeRouteEnter((to,from,next)=>{})  进入组件前  注：不能直接访问this， next((vm) => vm)
 * 
 * beforeRouteUpdate 在当前路由改变，但是该组件被复用时调用
 * 
 * 解决方案：1.beforeRouteUpdate   2.watch:{$route(newVal,oldVal) => {}}
 * 
 * //$router  $route 区别：
 * 
 * beforeRouteLeave  离开组件前
 * 
 * */

router.beforeEach((to,from,next) => {
    document.title = to.matched[0].meta.title || '宝宝看';
    next();
})


export default router

